<div class="modal-header">
  <span>{{ modalHeader }}</span>
</div>
<div class="modal-body">
  <nb-card>
    <nb-card-header>{{achievement.paperName}}
    </nb-card-header>
    <nb-card-body>
      <div *ngFor="let q of description; let i = index">
        <nb-card>
          <nb-card-header *ngIf="(q.answer === q.youranswer); else elseBlock" class="text-success" [innerHTML]="(i + 1) + ' ' + q.title + ' 答对了 '"></nb-card-header>
          <ng-template #elseBlock>
            <nb-card-header class="text-danger" [innerHTML]="(i + 1) + ' ' + q.title + ' 答错了 '"></nb-card-header>
          </ng-template>
          <nb-card-body [ngSwitch]="q.qtype">
            <div *ngSwitchCase="'single_choice'">
              <div class="form-group row" class="col-md-12" *ngIf="q.choiceA && q.choiceA != 'null'">
                <label class="custom-control custom-radio">
                  <input type="radio" class="custom-control-input" name="{{q.id}}" value="<p>A</p>" [(ngModel)]="q.youranswer">
                  <span class="custom-control-indicator"></span>
                  <span class="custom-control-description" [innerHTML]="q.choiceA"></span>
                </label>
              </div>
              <div class="form-group row" class="col-md-12" *ngIf="q.choiceB && q.choiceB != 'null'">
                <label class="custom-control custom-radio">
                  <input type="radio" class="custom-control-input" name="{{q.id}}" value="<p>B</p>" [(ngModel)]="q.youranswer">
                  <span class="custom-control-indicator"></span>
                  <span class="custom-control-description" [innerHTML]="q.choiceB"></span>
                </label>
              </div>
              <div class="form-group row" class="col-md-12" *ngIf="q.choiceC && q.choiceC != 'null'">
                <label class="custom-control custom-radio">
                  <input type="radio" class="custom-control-input" name="{{q.id}}" value="<p>C</p>" [(ngModel)]="q.youranswer">
                  <span class="custom-control-indicator"></span>
                  <span class="custom-control-description" [innerHTML]="q.choiceC"></span>
                </label>
              </div>
              <div class="form-group row" class="col-md-12" *ngIf="q.choiceD && q.choiceD != 'null'">
                <label class="custom-control custom-radio">
                  <input type="radio" class="custom-control-input" name="{{q.id}}" value="<p>D</p>" [(ngModel)]="q.youranswer">
                  <span class="custom-control-indicator"></span>
                  <span class="custom-control-description" [innerHTML]="q.choiceD"></span>
                </label>
              </div>
              <div class="form-group row" class="col-md-12" *ngIf="q.choiceE && q.choiceE != 'null'">
                <label class="custom-control custom-radio">
                  <input type="radio" class="custom-control-input" name="{{q.id}}" value="<p>E</p>" [(ngModel)]="q.youranswer">
                  <span class="custom-control-indicator"></span>
                  <span class="custom-control-description" [innerHTML]="q.choiceE"></span>
                </label>
              </div>
              <div class="form-group row" class="col-md-12" *ngIf="q.choiceF && q.choiceF != 'null'">
                <label class="custom-control custom-radio">
                  <input type="radio" class="custom-control-input" name="{{q.id}}" value="<p>F</p>" [(ngModel)]="q.youranswer">
                  <span class="custom-control-indicator"></span>
                  <span class="custom-control-description" [innerHTML]="q.choiceF"></span>
                </label>
              </div>
              <div class="alert alert-primary" role="alert">
                <strong>你的答案：</strong>
                <label [innerHTML]="q.youranswer"></label>
              </div>
              <div class="alert alert-success" role="alert">
                <strong>正确答案：</strong>
                <label [innerHTML]="q.answer"></label>
              </div>
              <div class="alert alert-info" role="alert">
                <strong>试题解析：</strong>
                <label [innerHTML]="q.analysis"></label>
              </div>
            </div>
            <div *ngSwitchCase="'multiple_choice'">
              <div class="form-group row">
                <nb-checkbox *ngIf="q.choiceA && q.choiceA != 'null'" class="col-md-12" [(ngModel)]="q.choiceA_answer">
                  <span [innerHTML]="q.choiceA"></span>
                </nb-checkbox>
                <nb-checkbox *ngIf="q.choiceB && q.choiceB != 'null'" class="col-md-12" [(ngModel)]="q.choiceB_answer">
                  <span [innerHTML]="q.choiceB"></span>
                </nb-checkbox>
                <nb-checkbox *ngIf="q.choiceC && q.choiceC != 'null'" class="col-md-12" [(ngModel)]="q.choiceC_answer">
                  <span [innerHTML]="q.choiceC"></span>
                </nb-checkbox>
                <nb-checkbox *ngIf="q.choiceD && q.choiceD != 'null'" class="col-md-12" [(ngModel)]="q.choiceD_answer">
                  <span [innerHTML]="q.choiceD"></span>
                </nb-checkbox>
                <nb-checkbox *ngIf="q.choiceE && q.choiceE != 'null'" class="col-md-12" [(ngModel)]="q.choiceE_answer">
                  <span [innerHTML]="q.choiceE"></span>
                </nb-checkbox>
                <nb-checkbox *ngIf="q.choiceF && q.choiceF != 'null'" class="col-md-12" [(ngModel)]="q.choiceF_answer">
                  <span [innerHTML]="q.choiceF"></span>
                </nb-checkbox>
              </div>
              <div class="alert alert-primary" role="alert">
                <strong>你的答案：</strong>
                <label [innerHTML]="q.youranswer"></label>
              </div>
              <div class="alert alert-success" role="alert">
                <strong>正确答案：</strong>
                <label [innerHTML]="q.answer"></label>
              </div>
              <div class="alert alert-info" role="alert">
                <strong>试题解析：</strong>
                <label [innerHTML]="q.analysis"></label>
              </div>
            </div>
            <div *ngSwitchCase="'true_false'">
              <div class="form-group row" class="col-md-12" *ngIf="q.choiceA && q.choiceA != 'null'">
                <label class="custom-control custom-radio">
                  <input type="radio" class="custom-control-input" name="{{q.id}}" value="<p>A</p>" [(ngModel)]="q.youranswer">
                  <span class="custom-control-indicator"></span>
                  <span class="custom-control-description" [innerHTML]="q.choiceA"></span>
                </label>
              </div>
              <div class="form-group row" class="col-md-12" *ngIf="q.choiceB && q.choiceB != 'null'">
                <label class="custom-control custom-radio">
                  <input type="radio" class="custom-control-input" name="{{q.id}}" value="<p>B</p>" [(ngModel)]="q.youranswer">
                  <span class="custom-control-indicator"></span>
                  <span class="custom-control-description" [innerHTML]="q.choiceB"></span>
                </label>
              </div>
              <div class="alert alert-primary" role="alert">
                <strong>你的答案：</strong>
                <label [innerHTML]="q.youranswer"></label>
              </div>
              <div class="alert alert-success" role="alert">
                <strong>正确答案：</strong>
                <label [innerHTML]="q.answer"></label>
              </div>
              <div class="alert alert-info" role="alert">
                <strong>试题解析：</strong>
                <label [innerHTML]="q.analysis"></label>
              </div>
            </div>
            <div *ngSwitchCase="'fill_in_the_blanks'">
              <div class="alert alert-primary" role="alert">
                <strong>你的答案：</strong>
                <label [innerHTML]="q.youranswer"></label>
              </div>
              <div class="alert alert-success" role="alert">
                <strong>正确答案：</strong>
                <label [innerHTML]="q.answer"></label>
              </div>
              <div class="alert alert-info" role="alert">
                <strong>试题解析：</strong>
                <label [innerHTML]="q.analysis"></label>
              </div>
            </div>
            <div *ngSwitchCase="'short_answer'">
              <div class="alert alert-primary" role="alert">
                <strong>你的答案：</strong>
                <label [innerHTML]="q.youranswer"></label>
              </div>
              <div class="alert alert-success" role="alert">
                <strong>正确答案：</strong>
                <label [innerHTML]="q.answer"></label>
              </div>
              <div class="alert alert-info" role="alert">
                <strong>试题解析：</strong>
                <label [innerHTML]="q.analysis"></label>
              </div>
            </div>
            <div *ngSwitchCase="'case_analysis'">
              <div class="alert alert-primary" role="alert">
                <strong>你的答案：</strong>
                <label [innerHTML]="q.youranswer"></label>
              </div>
              <div class="alert alert-success" role="alert">
                <strong>正确答案：</strong>
                <label [innerHTML]="q.answer"></label>
              </div>
              <div class="alert alert-info" role="alert">
                <strong>试题解析：</strong>
                <label [innerHTML]="q.analysis"></label>
              </div>
            </div>
          </nb-card-body>
        </nb-card>
      </div>
    </nb-card-body>
  </nb-card>
</div>
<div class="modal-footer">
  <button class="btn btn-md" (click)="closeModal()">取消</button>
</div>